<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的音乐</title>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.css">
    <link rel="stylesheet" href="css/footer.css">
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <style>
        .apl {
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            background-color: #fff; /* 设置背景颜色，如果需要的话 */
            /* 其他样式属性，例如 padding、border 等 */
            z-index: 999;
        }
    </style>
</head>
<div id="nav" class="w-75 m-auto"></div>
<div  style="width: 75%;margin: auto;height: 125vh" id="myMusicApp">
    <div v-if="userInfo===null">
        <a href="/music_platform/pages/login.html"><el-empty description="请登录"></el-empty></a>
    </div>
    <div v-else  class="mt-5">
        <div class="row">
            <div class="col-md-12 mt-2">
                <div class="mt-2 mb-2">
                    <a href="/music_platform/pages/create_playList.html"><el-button type="primary">新建歌单</el-button></a>
                </div>
                <el-tabs :tab-position="tabPosition" style="height: 600px;">
                    <el-tab-pane label="我的歌单">
                        <el-tabs :tab-position="tabPosition" style="height: 500px;">
                            <el-tab-pane v-for="(pl,index) in userPlayList" :label="pl.plname">
                                <div class="row">
                                    <a :href="'/music_platform/pages/playList_detail.html?plid='+pl.plid" style="text-decoration: none;color: #0f0f0f">
                                        <span class="col-md-6"><img class="img-thumbnail" :src="'/music_platform'+pl.pic" style="width: 50px;height:50px"></span>
                                        <span class="col-md-6">
                                            {{pl.plname}}
                                        </span>
                                    </a>
                                    <div class="float-right">
                                        <el-popconfirm
                                                title="确认删除吗？"
                                                @confirm="removePlayList(pl.plid)">
                                            <el-button slot="reference" size="small" type="danger"><i class="fa-solid fa-xmark"></i></el-button>
                                        </el-popconfirm>
                                    </div>
                                </div>
                                <div class="pre-scrollable" style="height: 600px">
                                <table class="table">
                                    <thead>
                                    <tr>
                                        <th scope="col"></th>
                                        <th scope="col">歌曲名</th>
                                        <th scope="col">专辑名</th>
                                        <th scope="col">歌手</th>
                                        <th scope="col"></th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr v-for="(song,index) in pl.songs">
                                        <th scope="row">{{index + 1}}</th>
                                        <td><a :href="'/music_platform/pages/song_detail.html?mid='+song.mid" style="text-decoration: none;color: #0f0f0f">{{song.mname}}</a></td>
                                        <td><a :href="'/music_platform/pages/album_detail.html?alid='+song.album.alid" style="text-decoration: none;color: #0f0f0f">{{song.album.aname}}</a></td>
                                        <td><a :href="'/music_platform/pages/singer_detail.html?sid='+song.singer.sid" style="text-decoration: none;color: #0f0f0f">{{song.singer.sname}}</a></td>
                                        <td>
                                            <el-button slot="reference" size="small" type="danger" @click="unfavorite(song.mid)"><i class="fa-solid fa-xmark"></i></el-button>
                                        </td>
                                        <td>
                                            <el-button slot="reference" size="small" type="primary" @click="playSong(song.mid)"><i class="fa-regular fa-circle-play" style="color: #f7f7f7;"></i></el-button>
                                        </td>
                                    </tr>
                                    </tbody>
                                </table>
                                </div>
                            </el-tab-pane>
                        </el-tabs>
                    </el-tab-pane>
                    <el-tab-pane label="歌单收藏">
                        <div class="container w-75" style="height: 700px;overflow:scroll">
                            <div class="row row-cols-1 row-cols-md-3">
                                <div v-for="(fpl,index) in userFavoritePlayList" class="col mb-4">
                                    <div class="card h-100">
                                        <a :href="'/music_platform/pages/playList_detail.html?plid='+fpl.plid" style="text-decoration: none;color: #0f0f0f">
                                            <img :src="'/music_platform'+fpl.pic" class="card-img-top" alt="...">
                                        </a>
                                        <div class="card-body">
                                            <h6 class="card-title">{{fpl.plname}}</h6>
                                            <p class="card-text" style=" overflow: hidden;
                                text-overflow: ellipsis;
                                display: -webkit-box;
                                -webkit-box-orient: vertical;
                                -webkit-line-clamp: 3; ">{{fpl.desc}}</p>
                                        </div>
                                        <div class="ml-lg-auto">
                                            <el-popconfirm
                                                    title="确认移除吗？"
                                                    @confirm="unCollectPlayList(fpl.plid)">
                                                <el-button slot="reference" size="small" type="danger"><i class="fa-solid fa-xmark"></i></el-button>
                                            </el-popconfirm>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane label="专辑收藏">
                        <div class="container w-75 pre-scrollable" style="height: 600px">
                            <table class="table table-striped">
                                <thead>
                                <tr>
                                    <th></th>
                                    <th></th>
                                    <th>专辑名</th>
                                    <th>歌手</th>
                                    <th></th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr v-for="(album,index) in userFavoriteAlbumList">
                                    <td>{{index+1}}</td>
                                    <td><img class="img-thumbnail" :src="'/music_platform'+album.pic" style="width: 50px;height:50px"></td>
                                    <td><a :href="'/music_platform/pages/album_detail.html?alid='+album.alid" style="text-decoration: none;color: #0f0f0f">{{album.aname}}</a></td>
                                    <td><a :href="'/music_platform/pages/singer_detail.html?sid='+album.singer.sid" style="text-decoration: none;color: #0f0f0f">{{album.singer.sname}}</a></td>
                                    <td>
                                        <el-popconfirm
                                            title="确认移除吗？"
                                            @confirm="unCollectAlbum(album.alid)">
                                            <el-button slot="reference" size="small" type="danger"><i class="fa-solid fa-xmark"></i></el-button>
                                        </el-popconfirm>
                                    </td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </el-tab-pane>
                </el-tabs>
            </div>
        </div>
    </div>
    <div class="apl">
        <aplayer autoplay
                 :music="{
                title: this.audio.name,
                artist: this.audio.artist,
                src: this.audio.url,
                pic: this.audio.cover,
                lrc: this.audio.lyc
            }" :float="true" :showLrc="true" :mutex="true" :listMaxHeight="'300px'":listFolded="false"
        />
    </div>
</div>


    <!-- footer部分开始 -->
    <div id="footer"></div>
    <!-- footer部分结束 -->

    <script src="js/jquery-3.5.1.min.js"></script>
    <script src="js/foot.js"></script>
    <script src="bootstrap/js/bootstrap.js"></script>
    <script src="js/newnav.js"></script>
    <script src="js/vue.js"></script>
    <script src="js/vue-aplayer.min.js"></script>
    <script src="js/axios.js"></script>
    <script src="js/getParameter.js"></script>
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script>
        let app = new Vue({
            el:"#myMusicApp",
            data:{
                userInfo:{},
                userPlayList:[],
                userFavoritePlayList:[],
                userFavoriteAlbumList:[],
                activeNames: ['1'],
                tabPosition: 'left',
                audio: {
                    name:'无歌曲',
                    artist: '无歌曲',
                    url: '',
                    cover: '/music_platform/img/R-C.png',
                    lyc:''
                },
            },
            methods: {
                async playSong(mid){
                    let _this = this;
                    await axios.get("/music_platform/singleSong/"+mid).then(function (response){
                        _this.audio.name = response.data.data.mname;
                        _this.audio.artist = response.data.data.singer.sname;
                        _this.audio.cover = "/music_platform"+response.data.data.pic;
                        _this.audio.lyc = response.data.data.lyc;
                        _this.audio.url = "/music_platform"+response.data.data.source;
                    })
                },
                loadUserDetail:async function (){
                    let _this = this;
                    let uid = getParameter("uid");
                    await axios.get("/music_platform/user/findUserDetail").then(function (response){
                        _this.userInfo = response.data.data;
                        _this.userPlayList = response.data.data.playlists;
                        _this.userFavoritePlayList = response.data.data.favoritePlayLists;
                        _this.userFavoriteAlbumList = response.data.data.favoriteAlbums;
                    })
                },
                unCollectPlayList:function (val){
                    let _this = this;
                    axios.get("/music_platform/playlist/removeFavoritePlayList",{
                        params:{
                            plid:val
                        }
                    }).then(function (response){
                        _this.loadUserDetail();
                    })
                },
                unfavorite:function (val){
                    let _this = this;
                    axios.get("/music_platform/playlist/unFavorite",{
                        params:{
                            mid:val
                        }
                    }).then(function (response){
                        _this.loadUserDetail();
                    })
                },
                unCollectAlbum:function (val){
                    let _this = this;
                    axios.get("/music_platform/album/removeFavoriteAlbum",{
                        params:{
                            alid:val,
                        }
                    }).then(function (response){
                        _this.loadUserDetail();
                    })
                },
                removePlayList:function (val){
                    let _this = this;
                    axios.get("/music_platform/playlist/removePlayList",{
                        params:{
                            plid:val
                        }
                    }).then(function (response){
                        _this.loadUserDetail();
                    })
                }
            },
            created:function (){
                this.loadUserDetail();
            },
            components: {
                Aplayer: window.VueAPlayer  // 注册Vue-APlayer组件
            }
        })
    </script>
</html>